<template>
    <div>
        <el-form
            :inline="true"
            :model="trainingplan_query"
            class="demo-form-inline"
        >
            <el-form-item label="ID">
                <el-input
                    v-model="trainingplan_query.id"
                    placeholder="请输入ID"
                    clearable
                />
            </el-form-item>
            <el-form-item label="申请课程名">
                <el-input
                    v-model="trainingplan_query.name"
                    placeholder="请输入课程名"
                    clearable
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onQuery"
                >查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onReload"
                >重置</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="dataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="课程名"
                prop="lectureName"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="handleEdit(scope.$index, scope.row)"
                    >查看修改培训计划</el-button>
                    <el-popconfirm
                        title="确认删除?"
                        @confirm="handleDelete(scope.$index, scope.row)"
                    >
                        <template #reference>
                            <el-button
                                size="small"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="CurrentChange"
            @size-change="CurrentChange"
            background
            layout="prev, pager, next"
            :total="data.selectData.count"
            :default-page-size="data.selectData.pagesize"
        />
    </div>
    <el-dialog
        v-model="dialogFormVisible"
        :title="curRow?.lectureName"
        align-center
    >
        <el-form
            ref="TrainingPlanForm"
            :model="TrainingPlan"
            :rules="TrainingPlanRules"
        >
            <el-form-item
                label="课程名称"
                prop="lectureName"
            >
                <el-input
                    v-model="TrainingPlan.lectureName"
                    autocomplete="off"
                    disabled
                />
            </el-form-item>
            <el-form-item
                label="讲师ID"
                prop="teacherId"
            >
                <el-input
                    v-model="TrainingPlan.teacherId"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="培训费用"
                prop="trainningCost"
            >
                <el-input
                    v-model="TrainingPlan.trainningCost"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="培训内容"
                prop="trainningContent"
            >
                <el-input
                    v-model="TrainingPlan.trainningContent"
                    type="textarea"
                    autocomplete="off"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="onSubmit('TrainingPlanForm')"
                >
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script lang="ts">
import {
    getCurrentInstance, inject, reactive,
    onMounted, computed, ref
} from "vue";
import { TrainingPlan, TrainingPlanRules, trainingplan_query, TrainingPlanData, TrainingPlanListData } from "@/utils/manage_TrainingPlanValidators"
import { ElMessage } from 'element-plus'
export default {
    setup() {
        const dialogFormVisible = ref(false);
        //@ts-ignore
        const { ctx } = getCurrentInstance();
        const axios = inject('axios');
        const data = reactive(new TrainingPlanListData());
        const curRow = ref<TrainingPlanData>();

        onMounted(() => {
            getTrainingPlanData();
        });

        const getTrainingPlanData = () => {
            //@ts-ignore
            axios.get("/api/trainningPlan/queryList",
                {
                    params: {
                        deleted: false,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        data.TrainingPlanList = res.data.data;
                        data.selectData.count = res.data.data.length;
                    } else {
                        alert("未请求到\"培训计划\"信息");
                    }
                });
        };

        const dataList = reactive({
            comList: computed(() => {
                return data.TrainingPlanList.slice(
                    (data.selectData.page - 1) * data.selectData.pagesize,
                    data.selectData.page * data.selectData.pagesize
                );
            }),
        });

        const CurrentChange = (page: number) => {
            data.selectData.page = page;
        };
        const SizeChange = (pagesize: number) => {
            data.selectData.pagesize = pagesize;
        };

        const handleEdit = (index: number, row: TrainingPlanData) => {
            console.log(index, row)
            dialogFormVisible.value = true;
            curRow.value = row;
            //@ts-ignore
            TrainingPlan.value = {
                lectureName: curRow.value.lectureName,
                teacherId: curRow.value.teacherId,
                trainningContent: curRow.value.trainningContent,
                trainningCost: curRow.value.trainningCost,
            }
        }
        const handleDelete = (index: number, row: TrainingPlanData) => {
            //@ts-ignore
            axios.get("/api/trainningPlan/delete",
                {
                    params: {
                        id: row.id,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        ElMessage({
                            message: '成功删除',
                            type: 'success',
                        })
                        location.reload();
                    } else {
                        alert("未请求到\"培训计划\"信息")
                    }
                });
        }

        interface QParams {
            deleted: boolean;
            id?: string;
            lectureName?: string;
        }

        const onQuery = () => {
            const { id, name } = trainingplan_query;
            let q_params: QParams = { deleted: false };
            var allowQuery = false;
            if (id != "" && /^[0-9]*$/.test(id)) {
                q_params.id = id;
                allowQuery = true;
            }
            if (name != "") {
                q_params.lectureName = name;
                allowQuery = true;
            }
            if (allowQuery) {
                //@ts-ignore
                axios.get("/api/trainningPlan/queryList",
                    {
                        params: q_params
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200 && res.data.success === true) {
                            console.log(res.data);
                            data.TrainingPlanList = res.data.data;
                            data.selectData.count = res.data.data.length;
                        } else {
                            alert("未请求到\"培训计划\"信息");
                        }
                    });
            }
        };

        const onReload = () => {
            location.reload();
        }

        const onSubmit = (formName: any) => {
            ctx.$refs[formName].validate((valid: boolean) => {
                if (valid) {
                    //@ts-ignore
                    axios.put("/api/trainningPlan/update", {
                        "id": curRow.value?.id,
                        "lectureId": curRow.value?.lectureId,
                        "lectureName": TrainingPlan.value.lectureName,
                        "teacherId": TrainingPlan.value.teacherId,
                        "trainningApplicationId": curRow.value?.trainningApplicationId,
                        "trainningContent": TrainingPlan.value.trainningContent,
                        "trainningCost": TrainingPlan.value.trainningCost,
                    }, {
                        headers: { 'Content-Type': 'application/json' }
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200 && res.data.success === true) {
                            console.log(res);
                            dialogFormVisible.value = false;
                            location.reload();
                        }
                        else {
                            alert("提交失败！");
                            return false;
                        }
                    })
                }
            })
        }

        return {
            data, trainingplan_query, dialogFormVisible, onQuery, onSubmit,
            handleDelete, handleEdit, TrainingPlan, TrainingPlanRules, curRow,
            dataList, CurrentChange, SizeChange, onReload,
        };
    },
};
</script>
    
<style scoped></style>